<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 600px;
				height: 600px;
				margin: 20px auto;
				position: absolute;
				bottom: -20px;
				box-sizing: border-box;
			}
			#box .row{
				position: absolute;
				overflow: hidden;
				
			}
			#box .row div{
				opacity: 1;
				-webkit-transition: all linear 0.5s;
			}
			#score{
				font-size: 50px;
				position: absolute;
				top: 20px;
				left: 20px;
				/*margin: 10px 0 0 10px;*/
			}
			#bigbox{
				width: 602px;
				height: 602px;
				border: 1px solid gray;
				position: relative;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="bigbox">
			<div id="score">
			00
			</div>
			<div id="box">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
	var score = document.getElementById("score");
		var box = document.getElementById("box");
		//初始创建每行的小格子的数量
		var number = 20;
		var bigbox = document.getElementById("bigbox");
		//row的bottom
		var rowBottom = 0;
		//定义每行移动的时间
		var time = 500;
		//创建row
		var haha = true;
		var boxBottom = -20;
		var n = 1;
		 function createRow(){
		 	var row = document.createElement("div");
		 	row.style.width = number*20 + "px";
		 	//给row添加classname   目的在于通过设置css来实现绝对定位
		 	row.className = "row";
		 	row.style.bottom = rowBottom + "px";
		 	//把row插进box
		 	box.appendChild(row);
		 	if(box.children.length > 10){
		 		n++;
				box.style.bottom = boxBottom*n + "px";
		 	}
		 	//创建小格子
		 	for(var i = 0;i < number;i++){
		 		var small = document.createElement("div");
		 		small.style.width = "18px";
		 		small.style.height = "18px";
		 		small.style.float = "left";
		 		small.style.border = "1px solid gray"
		 		row.appendChild(small);
		 	}
		 	//定义一个方向
		 	var panDuan = true;
//		 	var shuzi = 0;
		 	var orig = row.offsetLeft;
		 	var maxWidth = box.clientWidth - row.offsetWidth;
		 	row.timer = setInterval(function(){
		 		if(panDuan){
		 			orig += 20;
		 			if(orig >= maxWidth){
		 				panDuan = false;
		 			}
		 		}else{
		 			orig -=20;
		 			if(orig <= 0){
		 				panDuan = true;
		 			}
		 		}
		 		row.style.left = orig + "px";
		 	},time)
		 }
		 createRow();
		 var m = 0;
		 bigbox.onclick = function(){
		 	m++;
		 	rowBottom += 20;
		 	time -=50;
		 	if(time <= 50){
		 		time = 50;
		 	}
		 	//先让当前元素停下来
		 	var nowRow = box.lastElementChild;
		 	clearInterval(nowRow.timer);
		 	removeSmall();
			var shuzi = 10*m;
		 	if(haha){    
				score.innerHTML = shuzi;
		 		createRow();
		 	}
		 }
		//移除小格子
		function removeSmall(){
			//到底移除几个
			//获取当前正在滑动的块
			var nowItem = box.lastElementChild;
			//获取当前块前面的块
			var preItem = nowItem.previousElementSibling;
			//如果是第一行的直接不处理
			if(preItem == null){
				return;
			}
			var lengh = nowItem.offsetLeft - preItem.offsetLeft;
			//计算需要移除的小格子
			var removeNumberSmall = Math.abs(lengh/20);
			if(removeNumberSmall >= nowItem.children.length){
				alert("游戏结束");
				haha = false;
				return;
			}
			//如何判断左边超出，还是右边超出
			if(lengh > 0){
					//右边超出
				for(var j = 0; j < removeNumberSmall;j++){
						var rowLengh = nowItem.children.length;
						var child = nowItem.children[rowLengh-1];
				nowItem.removeChild(child);
				}
			}else{
				//左边超出
			for(var k = 0;k < removeNumberSmall;k++){
				var child = nowItem.children[0];
				nowItem.removeChild(child);	
				}
			//修改left
			var nowLeft = nowItem.offsetLeft;
			nowItem.style.left = nowLeft + 20 * removeNumberSmall + "px";
			}	
			//修改row width.
			nowItem.style.width = nowItem.children.length*20 + "px";
			//修改number
			number = nowItem.children.length;	
		}
	</script>
</html>